<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
        1.什么是虚拟DOM
        1.1虚拟DOM是相对于浏览器所渲染出来的真实DOM的
        1.2虚拟DOM就是使用JS对象来表示页面上的真实DOM
        */

        //虚拟DOM
        let vm = {
            tafeName: 'div',
            props: {
                id: 'app'
            },
            children: [{
                tagName: 'span',
                props: {
                    class: 'span1'
                },
                content: '你好'
            }]
        }
        /*
        为什么在React中需要虚拟DOM
        1.因为js中用对象来表示页面  页面结构有变化 可以很轻易的对比出来(Diff算法)
        2.跨平台

        虚拟DOM  真实DOM
        */
    </script>
</body>

</html>